<template>
    <div>
        <div class="search">
            <van-search v-model="value" placeholder="请输入搜索关键词" class="inputSearch" @input="sea"/>
            <span @click="back">返回</span>
        </div>

        <ul class="sort">
            <li :class="selecct === '全部'?'active':''" @click="all">全部</li>
            <li :class="selecct === '销量优先'?'active':''" @click="xl">销量优先</li>
            <li :class="selecct === '价格升序'?'active':''" @click="rise">价格升序</li>
            <li :class="selecct === '价格降序'?'active':''" @click="descend">价格降序</li>
        </ul>
        <ul class="shops">
            <li v-for="item in list" :key="item.goods_id">
                <div class="img">
                    <img :src="item.goods_image" alt="">
                </div>
                <div class="content">
                    <h2 class="tit" v-html="item.goods_name">
                    </h2>
                    <div class="price">
                        <span>￥<b>{{item.goods_price}}</b></span>
                        <span><b>{{item.goods_salenum}}</b>人付款</span>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
import Vue from 'vue'
import { Search, Toast } from 'vant'

import axios from 'axios'
import { mapState } from 'vuex'
Vue.use(Search)
export default {
  data () {
    return {
      value: '',
      shops: [],
      list: [],
      selecct: '全部'
    }
  },
  mounted () {
    this.value = this.$route.query.keyword

    // 设置axios为form-data
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
    axios.defaults.headers.get['Content-Type'] = 'application/x-www-form-urlencoded'
    axios.defaults.transformRequest = [function (data) {
      let ret = ''
      for (const it in data) {
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
      }
      return ret
    }]
    // 然后再修改原型链
    Vue.prototype.$axios = axios
    // console.log(this.$route.query.keyword);

    axios.post('/lct?api_version=2.3.0&platType=2&client=wap&isEncry=0&time=1583483859372&act=goods&op=goodsList', {
      provinc: this.province_id,
      city: this.city_id,
      keyword: this.$route.query.keyword,
      page: 1,
      coupon_id: '',
      sorted: 4,
      sequence: 0,
      start_price: 0,
      ent_price: 0,
      goods_from: 0,
      key: '',
      store_id: ''
    }).then(res => {
      // console.log(res.data.datas.list);
      this.shops = res.data.datas.list
      // this.list = res.data.datas.list
      console.log(res.data.datas.list.length)

      for (let i = 0; i < res.data.datas.list.length; i++) {
        this.list.push(res.data.datas.list[i])
      }
      console.log(this.list)
    })
  },
  methods: {
    back () {
      this.$router.back()
    },
    sea () {
      if (this.value == '') {
        this.list = this.shops
      }
      console.log(this.value)
      this.list = this.shops.filter(item => {
        if (item.goods_name.indexOf(this.value) !== -1) {
          console.log('aaa', item)
          return item
        }
      })
      console.log('bbbb', this.shops)
    },
    all () {
      this.selecct = '全部'
      this.list = []
      for (let i = 0; i < this.shops.length; i++) {
        //   console.log(this.shops[i]);
        this.list.push(this.shops[i])
      }
      //   this.value = ''
      console.log(this.shops)
    },
    xl () {
      this.selecct = '销量优先'
      // this.list.sort((a,b) =>{

      // })
      // var arr = [
      //     {name:'zopp',age:0},
      //     {name:'gpp',age:18},
      //     {name:'yjj',age:8}
      // ];
      // this.list = this.shops
      function compare (property) {
        return function (a, b) {
          var value1 = a[property]
          var value2 = b[property]
          return value2 - value1
        }
      }
      this.list.sort(compare('goods_salenum'))
    },
    rise () {
      this.selecct = '价格升序'

      function compare (property) {
        return function (a, b) {
          var value1 = a[property]
          var value2 = b[property]
          return value1 - value2
        }
      }
      this.list.sort(compare('goods_price'))
    },
    descend () {
      this.selecct = '价格降序'
      function compare (property) {
        return function (a, b) {
          var value1 = a[property]
          var value2 = b[property]
          return value2 - value1
        }
      }
      this.list.sort(compare('goods_price'))
    }
  },
  computed: {
    ...mapState(['province_id', 'city_id'])
  }
}
</script>
<style lang="scss" scoped>
.active{
    color:red;
}
.search{
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    align-items: center;
    .inputSearch{
        width: 60%;
        background: none;
    }
    span{
        font-size: 16px;
        width: 50px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border: 1px solid #ccc;
        color: black;
    }
}

    .sort{
        display: flex;
        margin-top: 20px;
        justify-content: space-between;
        align-items: center;
        padding-left: 30px;
        padding-right: 30px;
        border-bottom: 1px solid #ccc;
        height: 40ox;
        li{
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
            height: 100%;
            line-height: 40px;
        }
    }
    .shops{
        width: 100%;
        li{
            height: 120px;
            border-bottom: 1px solid #ccc;
            // background: red;
            padding-left: 10px;
            padding-right: 10px;
            display: flex;
            .img{
                width: 120px;
                height: 100%;
                margin-right: 20px;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .content{
                width: 200px;
                .tit{
                    font-size: 16px;
                    height: 60px;
                    padding-top: 15px;
                    box-sizing: border-box;
                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                }
                .price{
                    margin-top: 30px;
                    display: flex;
                    justify-content: space-between;
                    width: 200px;
                    span{
                        font-size: 15px;
                        color: rgb(163, 157, 157);
                        b{
                            color: red;
                        }
                    }
                }
            }
        }
    }
</style>
